<template>
  <div>
    vue使用watch监听实现类似百度搜索功能
    <a @click="open">123123</a>
    <div>
      <input type="text" class="search" placeholder="搜索" v-model.trim='keyword'/>
    </div>
    <div v-show="keyword">
      <ul>
        <li v-for="item in cityList" :key="item.id" @click="handleCityClick(item.name)">
          {{item}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  // 节流函数
  // const delay = (function () {
  //     let timer = 0;
  //     return function (callback, ms) {
  //         clearTimeout(timer);
  //         timer = setTimeout(callback.ms)
  //     }
  // })()
  import Loading1 from '~/components/loading1.vue'
  export default {
    name: "usertest",
    layout: 'login_test',
 components: {Loading1},
    async asyncData({$axios}) {

      // return {title:res.data.title}
    },
    data() {
      return {
        keyword: '',
        cityList: [],
        timer: null,
        jsonData: [{
          'id': 1,
          'name': '北京'
        },
          {
            'id': 1,
            'name': '南京'
          },
          {
            'id': 2,
            'name': '上海'
          },
          {
            'id': 3,
            'name': '广州'
          },
          {
            'id': 4,
            'name': '深圳'
          },]
      }
    },
    watch: {
      keyword() {
        //函数节流
        if (this.timer) {
          clearTimeout(this.timer)
        }
        //删除文字  清零
        if (!this.keyword) {
          this.cityList = []
          return
        }
        this.timer = setTimeout(() => {
          const result = []
          this.jsonData.forEach(val => {
            if (val.name.indexOf(this.keyword) > -1) {
              result.push(val.name)
            }
          });
          this.cityList = result
          console.log(this.cityList)
        }, 100)
      }
    },
    methods: {
      open() {
        this.$alert("fdf", "提示", {confirmButtonText: "确定"})
      }
    },
  }
</script>

<style scoped>

</style>
